<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色维护</title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>


	</head>
	<body>
		<div id="app">

			<el-table size="mini" :data="tableData" border style="width: 100%">
				<el-table-column prop="rolename" label="角色名字" width="180">
				</el-table-column>
				<el-table-column prop="description" label="描述" width="180">
				</el-table-column>

				<el-table-column>
					<template slot="header" slot-scope="scope">
						<el-button type="primary" size="mini">增加</el-button>
					</template>

					<template slot-scope="scope">
						<el-button size="mini">编辑</el-button>
						<el-button size="mini" type="primary" @click="drawertree">资源权限</el-button>
						<el-button size="mini" type="danger">删除</el-button>
					</template>
				</el-table-column>

			</el-table>


			<el-drawer title="资源权限维护" :visible.sync="drawer">

				<el-tree ref="tree" check-strictly="true" :data="datatree" show-checkbox node-key="id"
					:props="defaultProps" default-expand-all="true" :default-checked-keys="ckkeys">
				</el-tree>

			</el-drawer>

		</div>


		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					tableData: [],
					page: 1,
					drawer: false,
					datatree: [{
						"id": 1,
						"permistitle": "ss"
					}],
					defaultProps: {
						children: 'two',
						label: 'permistitle'
					},
					ckkeys: []
				},
				methods: {
					initdata() { //初始化表格数据
						let that = this
						//发送ajax请求，获取后端接口数据
						axios.post("http://localhost:8081/selectrole/" + this.page + "/50", {}).then(function(res) {
							// alert(JSON.stringify(res.data.data.pageInfo.list))
							that.tableData = res.data.data.pageInfo.list
						}).catch(err => {
							console.log(err)
						});

					},
					drawertree() { //打开抽屉，显示树

						this.drawer = true


						let that = this
						//发送ajax请求，获取后端接口数据
						axios.post("http://localhost:8081/selectrolepermis", {}).then(function(res) {
							// alert(JSON.stringify(res.data.data.list))
							//设置树选中
							that.datatree = res.data.data.list

							// that.$refs.tree.setCheckedKeys([1, 3]);
						}).catch(err => {
							console.log(err)
						});


						this.ckkeys = [1, 3, 4]
						// this.$refs.tree.setCheckedKeys([1, 3]);


					},
				},
				mounted() {
					this.initdata()
				}
			})
		</script>

	</body>
</html>